import { Component, OnInit, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Platform, ToastController, AlertController } from '@ionic/angular';
import { Events } from '../events'
// import * as echarts from 'echarts/';

@Component({
  selector: 'app-testtesttest',
  templateUrl: './testtesttest.page.html',
  styleUrls: ['./testtesttest.page.scss'],
})
export class TesttesttestPage implements OnInit {
  mobile;
  password;
  verificationCode;
  isChecked = false;

  imagedatas = [{ title: '匿名', image: '../../assets/img/img/active.png', count: '122', price: '120', date: '2020-01-01' },
  { title: '匿名', image: '../../assets/img/img/active.png', count: '322', price: '120', date: '2020-01-02' },
  { title: '匿名', image: '../../assets/img/img/active.png', count: '122', price: '120', date: '2020-01-11' }];
  type = 'KF';
  changetext = '切换到KFM置换';
  // @ViewChild('chart', { static: true }) chart;
  clickdiv;
  clickdiv2;
  // myChart;
  constructor(private platform: Platform,
    // private toast: Toast,
    // public httputl: Httputils,
    private events: Events,
    public router: Router,
    private el: ElementRef,
    // private nativeStorage: NativeStorage,
    private alertCtrl: AlertController,
    public activeRoute: ActivatedRoute,
    public toastCtrl: ToastController,) {



  }
  login() {
    console.log(this.mobile + "----" + this.
      password + "----" + this.
        verificationCode + "----" + this.
        isChecked);
  }
  ngOnInit() {

    // var dassss = this.el.nativeElement.querySelectorAll(".active");
    // this.clickdiv = dassss[0];

    var dassss = this.el.nativeElement.querySelectorAll(".active");
    this.clickdiv2 = dassss[0];

    this.getdata();
  }
  getdata() {

    // if(this.type === 'KF'){
    //   this.getEchart(true);
    // }
  }


  // getEchart(flag) {
  //   //月份是从0-11这个常识就不用说了
  //   let year = 2021; let mount = 4; let date = 1;//获取开始年月日
  //   let timed = new Date(year, mount, date).getTime();//将开始年月日转换成时间戳
  //   let oneDay = 24 * 3600 * 1000;
  //   let timing = new Date().getTime();//获取结束时间戳
  //   let dates = (timing - timed) / 86400000//开始结束相差的天数
  //   console.log(dates + "----");
  //   let xdate = [];
  //   var num = [Math.random() * 300];
  //   for (let i = 0; i <= 7; i++) {//根据天数循环添加
  //     let now = new Date(timed += oneDay)
  //     xdate.push([now.getFullYear(), now.getMonth() + 1, now.getDate() - 1].join('/'));//获取X时间数据
  //     num.push(Math.round((Math.random() - 0.5) * 20 + num[i]));//模拟数据
  //   }

  //   //注意！如果在这有小伙伴报错的话可以把接下来的代码挪到一个回调函数里，别问我为什么我也不知道
  //   this.myChart = echarts.init(<HTMLDivElement>document.getElementById('chart'));
  //   let option = {
  //     title: {
  //       x: 'center'
  //     },
  //     tooltip: {
  //       trigger: 'axis',
  //       position: function (pt) {
  //         return [pt[0], '10%'];
  //       }
  //     },
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //       data: xdate,
  //     },
  //     yAxis: {
  //       type: 'value',
  //       boundaryGap: [0, '100%']
  //     },
  //     // dataZoom: [{
  //     //   type: 'inside',
  //     //   start: 0,
  //     //   end: 100,
  //     // }],
  //     grid: { //修改边界 类似padding
  //       top: '6%',
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true
  //     },
  //     series: [
  //       {
  //         name: '模拟数据',
  //         type: 'line',
  //         // smooth: true,
  //         // symbol: 'none',
  //         // sampling: 'average',
  //         itemStyle: {
  //           color: 'rgb(255, 70, 131)'
  //         },
  //         data: num
  //       }
  //     ]
  //   };
  //   if (flag) {
  //     this.myChart.setOption(option);
  //   } else {
  //     this.myChart.dispose();//销毁清空
  //   }
  // }
  changetype() {
    if (this.type === 'KF') {
      this.type = 'KFM';
      // this.getEchart(false);
      this.getdata();
    } else {
      this.type = 'KF';
      // this.getEchart(true);
      this.getdata();
    }
  }
  openpage(e, url) {

    // var ele = e.target;
    // while(ele.tagName !== 'ION-COL'){
    //   // console.log(ele.tagName);
    //   ele = ele.parentNode;
    //   // console.log(ele.tagName);
    // }

    // // if () {
    // // } else {
    // //   ele = ele.parentNode;
    // // }
    // if (this.clickdiv != undefined) {
    //   this.clickdiv.classList.remove('active');
    //   this.clickdiv.classList.add('unactive');
    // }


    // this.clickdiv = ele;
    // ele.classList.remove('unactive');
    // ele.classList.add('active');

    // this.type = type;
    // this.page = 0;//页码
    // this.limit = 8;//条数
    // this.items = [];
    // this.getdata(null);


    var parms = { type: this.type };

    // var parms = {id:id,type:type    ,title:title};

    if (url !== '') {
      this.router.navigate([url], {
        queryParams: parms,
      });
    } else {
      this.Tip("功能开发中");
    }
  }

  onClick2(e, type) {
    var ele = e.target;
    if (ele.tagName == 'P') {
    } else {
      ele = ele.parentNode;
    }
    if (this.clickdiv2 != undefined) {
      this.clickdiv2.classList.remove('active');
    }
    this.clickdiv2 = ele;
    ele.classList.add('active');

    // this.type = type;

    // this.page = 0;//页码
    // this.limit = 8;//条数
    // this.items = [];
    // this.getdata(null);
  }

  Tip(str) {
    // super.showToast(this.platform, this.toastCtrl, this.toast, str);
  }
}
